<template>
  <el-row :gutter="40" class="panel-group">
    <el-col :xs="40" :sm="52" :lg="100" class="card-panel-col">
      <!--  <div class="card-panel" @click="handleSetLineChartData('newVisitis')"> -->
      <div class="card-panel">
        <!--  <div class="card-panel-icon-wrapper icon-people">
          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
        </div> -->
        <div class="card-panel-description">
          <div class="card-panel-text">
            公告板:
            <!--  <count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" /> -->
            <h1>开发团队介绍：</h1>
            <p>
              2025年1月更新 <br>
              本产品主要贡献者优雅草科技·优雅草kir|优雅草星星|优雅草银满|优雅草undefined-青史留名，时光如川浪淘沙，青史留名多俊杰，蜻蜓Q旗舰版standard（简称stq）是优雅草科技2022点主打的一款涵盖直播，实时语音，朋友圈社交，IM聊天等的社交软件，此款多功能产品性能卓越，加载流畅稳定，安全级别高，前后端分离，后端框架为laravel+composer+前端vue+weex+uniapp+node.js的产品，使用多个原生sdk，可自由接入各类原生sdk，蜻蜓Q旗舰版在蜻蜓Q系统的基础上陆续发布更新内容，漫画，小说功能将逐步完善简介，章节，打赏等多个交互功能，蜻蜓Q旗舰版陆续增加直播礼物特效（分svg和mp4礼物）演示，直播群聊天，直播pk，直播单线连麦等多个 旗舰企业级功能，这是一款满足更快一步的个性化定制基础demo版本。
              <br>
              核心：2020年PHP版本后端主程兼架构师kiro涛，2022年JAVA版本后端主程兼架构师Evan双文，2019年第一代松鼠短视频系统前端主程兼架构师bigniu，后端大宗师，后端jack谢，，大数据算法QH，安卓原生three，IOS开发麻子，原生sdk插件开发thr,flutter插件开发天辉，音视频处理flysd,优雅草前端星星,优雅草前端果果,优雅草后端小无,优雅草后端和财，优雅草前端DT，优雅草前端黄瑞，优雅草前端smart，优雅草后端片翼，优雅草前端Alex，。
              <br>
              辅助成员：早知当初不下凡了，流年，小玲，风铃儿，yungui,浮生若水,奉贤,akin,nermay。
              <br>
              合作伙伴：知道创宇 腾讯云 景安 涂图 美狐 七牛云 阿里云 <br>
              极光 百度AI智能云  字节跳动·火山引擎 声网 个推
            </p>
            <h1>其他相关介绍：</h1>
            <p>
              蜻蜓系列系统介绍：
              <a href="https://songshu.youyacao.com/" target="_blank">https://songshu.youyacao.com/</a>
              <br>
              蜻蜓安装教程介绍：
              <a href="https://doc2.youyacao.com/web/#/8/49" target="_blank">https://doc2.youyacao.com/web/#/8/49</a>
              <br>
              蜻蜓API文档介绍：
              <a href="https://doc2.youyacao.com/web/#/16/95" target="_blank">https://doc2.youyacao.com/web/#/16/95</a>
              <br>
              优雅草2025年·花开绽放计划·全面拥抱开源：
              <a href="https://doc.youyacao.com/119/2284" target="_blank">https://doc.youyacao.com/119/2284</a>
              <br>
              YYC松鼠短视频系统-2019年·铸造经典：
              <a href="https://songshu.youyacao.com/video.html" target="_blank">https://songshu.youyacao.com/video.html</a>
              <br>
              涂图原生SDK美颜插件：<a href="https://ext.dcloud.net.cn/plugin?id=3694" target="_blank">https://ext.dcloud.net.cn/plugin?id=3694</a>
              <br>
              字节原生SDK美颜插件：<a href="https://ext.dcloud.net.cn/plugin?id=5008" target="_blank">https://ext.dcloud.net.cn/plugin?id=5008</a>
              <br>
              美狐原生SDK美颜插件：<a href="https://ext.dcloud.net.cn/plugin?id=3800" target="_blank">https://ext.dcloud.net.cn/plugin?id=3800</a>
              <br>
            </p>
            <br>
            <h1>联系我们（微信扫码直接联系）-关注我们（公众号）：</h1>
            <p>
              <img
                src="https://www.youyacao.com/images/gfwx.png"
                style="
                  width: 100px;
                  height: 100px;
                "
                alt="微信扫码直接联系"
              >
              <img
                src="https://www.youyacao.com/images/gzh.jpg"
                style="
                  width: 100px;
                  height: 100px;
                "
                alt="微信扫码直接联系"
              >
              <br>
              优雅草技术总监联系QQ:422108995
              <br>
              更多联系方式：https://doc2.youyacao.com/web/#/22/1024
              <br>
              www.youyacao.com
              <br>
              Copyright ©一颗优雅草科技 2015-2025 All rights reserved
            </p>
          </div>
        </div>
      </div>
    </el-col>
    <!-- <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('messages')">
        <div class="card-panel-icon-wrapper icon-message">
          <svg-icon icon-class="message" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            接口介绍
          </div>
          <count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" />
        </div>
      </div>
    </el-col> -->
    <!--    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('purchases')">
        <div class="card-panel-icon-wrapper icon-money">
          <svg-icon icon-class="money" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            最新发布
          </div>
          <count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('shoppings')">
        <div class="card-panel-icon-wrapper icon-shopping">
          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            相关衍生产品
          </div>
          <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
        </div>
      </div>
    </el-col> -->
  </el-row>
  <!--  <el-row :gutter="40" class="panel-group">
  </el-row> -->
</template>

<script>
export default {
  components: {
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.panel-group {
  margin-top: 18px;
  .card-panel-col {
    margin-bottom: 32px;
  }
  .card-panel {
    height: 810px;
    // cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);
    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }
      .icon-people {
        background: #40c9c6;
      }
      .icon-message {
        background: #36a3f7;
      }
      .icon-money {
        background: #f4516c;
      }
      .icon-shopping {
        background: #34bfa3
      }
    }
    .icon-people {
      color: #40c9c6;
    }
    .icon-message {
      color: #36a3f7;
    }
    .icon-money {
      color: #f4516c;
    }
    .icon-shopping {
      color: #34bfa3
    }
    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }
    .card-panel-icon {
      float: left;
      font-size: 48px;
    }
    .card-panel-description {
      float: left;
      font-weight: bold;
      margin: 26px;
      margin-left: 20px;
      .card-panel-text {
        line-height: 30px;
        color: rgb(255, 177, 0);
        font-size: 30px;
        margin-bottom: 12px;
      }
      .card-panel-text h1{
        line-height: 28px;
        color: rgba(255, 0, 0, 0.45);
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 12px;
      }
      .card-panel-text p{
        line-height: 16px;
        color: rgb(86, 187, 131);
        font-size: 12px;
        margin-bottom: 12px;
      }
      .card-panel-text img{
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }
      .card-panel-text a {
        line-height: 18px;
        color:rgba(0, 149, 255, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }
      .card-panel-text a:hover {
        line-height: 18px;
        color:rgba(255, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }
      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}

@media (max-width:550px) {
  .card-panel-description {
    display: none;
  }
  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
</style>
